<!DOCTYPE html>
<html>
<head>
  <title>Navigation Page</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <div v-for="(item, index) in items" :key="index" 
  @click="changeContent(item)" :class="{active: item === current}">
    
    <button>{{item }}</button>
  </div>
  <div :style="{background: currentColor}">
    {{"选择了"+current }}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['HTML', 'CSS', 'JavaScript','Vue.js'], // 导航条项目列表
    current: '', // 当前被单击的项目内容
    currentColor: '' // 当前被单击项目的背景颜色
  },
  methods: {
    changeContent(item) {
      this.current = item;
      this.currentColor = '#E35885';
    }
  },
});
</script>

</body>
</html>